
<template>

  <div >
    <el-card>
      <div class="title-flex">
        <div>项目分类执行率</div>
<!--        <div>-->
<!--          <el-button-group class="ml-4">-->
<!--            <el-button type="primary"> 新增</el-button>-->
<!--            <el-button type="primary" > 导出</el-button>-->
<!--            <el-button type="primary" icon="Histogram" > 统计分析</el-button>-->
<!--          </el-button-group>-->
<!--        </div>-->
      </div>
      <div class="flex-input">
        <div>
          <el-tree-select
              v-model="getListParme.projectTypeCode"
              :data="xiangmufenleiOptions"
              :props="{ label: 'label', value: 'id', children: 'children' }"
              multiple
              filterable
              collapse-tags
              collapse-tags-tooltip
              placeholder="请选择"
              @focus="getxiangmufenleiOptions"
          />
<!--          <div>已选择的项: {{ selectedKeys }}</div>-->
        </div>
        <div>
          <div  class="date-picker-wrapper">
            <el-date-picker
                v-model="valueDate"
                type="yearrange"
                style="width: 100%;"
                range-separator="至"
                start-placeholder="最小立项日期"
                end-placeholder="最大立项日期"
            />
          </div>
        </div>
        <div>
          <el-select
              v-model="getListParme.executeYear"
              multiple
              collapse-tags
              filterable
              collapse-tags-tooltip
              placeholder="执行周期"
              @focus="getzhixingniandu"
          >
            <el-option
                v-for="item in zhixingnianduOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            />
          </el-select>
        </div>
        <div style="min-width: 266px">
          <el-button type="primary" icon="Search" @click="confirmClick('click')">查询</el-button>
          <el-button  icon="Search" @click="reset">重置</el-button>
        </div>
      </div>
    </el-card>
  <el-card style="margin-top: 10px">
      <zxjdTable ref="getchildListzxjd" v-model="getListParme"></zxjdTable>
  </el-card>


  </div>
</template>

<script setup lang="ts">
import zxjdTable from '@/views/money/zxjd/zxjdTable.vue'
import {onBeforeMount} from "vue";
import {getCategory} from './../../../api/money/zxjdApi'
import {ElMessage} from "element-plus";


const getchildListzxjd = ref(null)

// 定义日期格式化函数
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}
const ensureDateArray = function (arr) {
  console.log(arr)
  // if(arr.length > 0){
    return arr.map((item) => {
      if (typeof item ==='string') {
        return new Date(item);
      }
      return item;
    });
  // }

}

const confirmClick = function (where){
  if(where == 'one'){
    // 将选择的年份范围设置为1月1号
    if(valueDate.value.length > 0){
      valueDate.value = ensureDateArray(valueDate.value);
      valueDate.value = [
        new Date(valueDate.value[0].getFullYear(), 0, 1),
        new Date(valueDate.value[1].getFullYear(), 11, 31)
      ];
      getListParme.value.params.beginTime = formatDate(valueDate.value[0]);
      getListParme.value.params.endTime = formatDate(valueDate.value[1]);
    }else {
      const currentYear = new Date().getFullYear();
      getListParme.value.params.beginTime =formatDate(new Date(currentYear, 0, 1))
      getListParme.value.params.endTime = formatDate(new Date(currentYear, 11, 31))
      valueDate.value = [
        formatDate(new Date(currentYear, 0, 1)),
        formatDate(new Date(currentYear, 11, 31))
      ];
      console.log(getListParme.value)
    }


    getchildListzxjd.value.getslist();
    //console.log(getchildListjfzc.value.getslist)
    // listtotal(
    //     getListParme.value
    // )
    //     .then((res)=>{
    //       borderCardOptions.value =res.data
    //       getchildList.value.getList();
    //     })

  }else if(where == 'click'){
    console.log(valueDate.value)
    if(valueDate.value == null){
      valueDate.value = []
    }
    // 将选择的年份范围设置为1月1号
    if(valueDate.value.length > 0){
      valueDate.value = ensureDateArray(valueDate.value);
      valueDate.value = [
        new Date(valueDate.value[0].getFullYear(), 0, 1),
        new Date(valueDate.value[1].getFullYear(), 11, 31)
      ];
      getListParme.value.params.beginTime = formatDate(valueDate.value[0]);
      getListParme.value.params.endTime = formatDate(valueDate.value[1]);
    }else {
      getListParme.value.params.beginTime = '';
      getListParme.value.params.endTime = '';
    }


    getchildListzxjd.value.getslist();
    //console.log(getchildListjfzc.value.getslist)
    // listtotal(
    //     getListParme.value
    // )
    //     .then((res)=>{
    //       borderCardOptions.value =res.data
    //       getchildList.value.getList();
    //     })
  }


}
//重置
const reset = () => {
  for (const key in getListParme.value) {
    if (typeof getListParme.value[key] === 'object' && getListParme.value[key]!== null) {
      // 处理嵌套对象
      for (const subKey in getListParme.value[key]) {
        getListParme.value[key][subKey] = '';
      }
    } else {
      getListParme.value[key] = '';
    }
    // 单独处理 unitld，将其置为空数组
    if (key === 'unitld') {
      getListParme.value[key] = [];
    }
  }
  // 清空 valueDate
  valueDate.value = [];
}
//项目分类
const xiangmufenleiOptions = ref([])

const getxiangmufenleiOptions = function () {
  getCategory({
    'bizName':'项目分类（所有-有级联）'
  })
      .then((res)=>{
        xiangmufenleiOptions.value = res.data
      })
}


const zhixingnianduOptions = ref([])

const getzhixingniandu = function (){
  getCategory({
    'bizName':'执行年度'
  })
      .then((res)=>{
        zhixingnianduOptions.value = res.data
      })
}

const getListParme = ref({
  projectTypeCode:[],//项目分类
  executeYear:[],//执行周期
  orderByColumn:"execute_year",
  isAsc:"descending",
  params:{
    beginTime:'',//最小立项年度:beginTime
    endTime:'',//最大立项年度:endTime
  }
})

// 最小大年度立项
const valueDate = ref([])
// 模拟树形数据
const treeData = ref([
  {
    id: 1,
    label: '一级节点 1',
    children: [
      {
        id: 11,
        label: '二级节点 1-1'
      },
      {
        id: 12,
        label: '二级节点 1-2'
      }
    ]
  },
  {
    id: 2,
    label: '一级节点 2',
    children: [
      {
        id: 21,
        label: '二级节点 2-1'
      }
    ]
  }
]);

// 存储选中的节点 id
const selectedKeys = ref([]);

onMounted(()=>{
   confirmClick('one')
})

</script>
<style scoped lang="scss">
.title-flex{
  display: flex;
  justify-content: space-between;
  text-align: center;

}
.flex-input{
  display: flex;
  flex-wrap: wrap;
  min-width: 1100px;
}
.flex-input>div{
  width: 24%;
  margin: 10px 10px 0 0;
}
</style>